<script setup>
import { ref } from 'vue'
const visible1 = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)
</script>

<template>
  <h1 class="row-title">普通引入</h1>
  <div class="row">
    <lee-button type="primary" plain @click="visible1 = !visible1"
      >默认对话框</lee-button
    >
    <lee-button type="primary" plain @click="visible2 = !visible2"
      >自定义标题</lee-button
    >
    <lee-button type="primary" plain @click="visible3 = !visible3"
      >自定义底部插槽</lee-button
    >
  </div>
  <lee-dialog v-model:visible="visible1" @close="visible1 = false">
    这是对话框
  </lee-dialog>
  <lee-dialog
    v-model:visible="visible2"
    @close="visible2 = false"
    title="这是一个自定义标题"
    top="40vh"
    width="30vw"
  >
    这是自定义对话框
  </lee-dialog>
  <lee-dialog v-model:visible="visible3" @close="visible3 = false">
    这是对话框
    <template #footer>
      <lee-button type="primary" @click="visible3 = false">取消</lee-button>
      <lee-button type="primary" @click="visible3 = false">确定</lee-button>
    </template>
  </lee-dialog>
</template>

<style scoped></style>
